<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行计划 - 多语言旅行助手</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style-travel-plan.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header>
        <h1>多语言旅行助手</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="learning.html">学习中心</a></li>
                <li><a href="translation.html">翻译</a></li>
                <li><a href="culture.html">文化知识库</a></li>
                <li><a href="map.html">离线地图</a></li>
                <li><a href="travel-plan.html" class="active">旅行计划</a></li>
                <li><a href="offline-content.html">离线内容</a></li>
                <li><a href="profile.html">个人资料</a></li>
                <li><a href="settings.html">设置</a></li>
            </ul>
        </nav>
    </header>

    <!-- 侧边导航栏 -->
    <aside class="side-nav">
        <ul>
            <li>
                <a href="index.html">
                    <img src="images/home.svg" alt="首页图标">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="learning.html">
                    <img src="images/book-open-bold.svg" alt="学习图标">
                    <span>学习</span>
                </a>
            </li>
            <li>
                <a href="translation.html">
                    <img src="images/vector_25_310.svg" alt="翻译图标">
                    <span>翻译</span>
                </a>
            </li>
            <li>
                <a href="culture.html">
                    <img src="images/globe-bold.svg" alt="文化图标">
                    <span>文化</span>
                </a>
            </li>
            <li>
                <a href="map.html">
                    <img src="images/vector_25_317.svg" alt="地图图标">
                    <span>地图</span>
                </a>
            </li>
            <li>
                <a href="offline-content.html">
                    <img src="images/vector_25_324.svg" alt="离线内容图标">
                    <span>离线</span>
                </a>
            </li>
            <li>
                <a href="settings.html">
                    <img src="images/vector_25_331.svg" alt="设置图标">
                    <span>设置</span>
                </a>
            </li>
        </ul>
    </aside>

    <!-- 内容区 -->
    <main class="content travel-plan-content">
        <h1 class="page-title">旅行计划</h1>
        
        <div class="plan-container">
            <div class="plan-sidebar">
                <div class="plan-actions">
                    <button id="create-plan-btn" class="primary-btn">
                        <img src="images/placeholder.svg" alt="创建" width="16" height="16">
                        创建新计划
                    </button>
                </div>
                
                <div class="plan-list">
                    <h3>我的旅行计划</h3>
                    <div class="plan-items">
                        <div class="plan-item active">
                            <div class="plan-item-header">
                                <h4>东京之旅</h4>
                                <span class="plan-date">2025年7月</span>
                            </div>
                            <div class="plan-item-meta">
                                <span class="plan-duration">7天</span>
                                <span class="plan-status">计划中</span>
                            </div>
                        </div>
                        
                        <div class="plan-item">
                            <div class="plan-item-header">
                                <h4>巴黎假期</h4>
                                <span class="plan-date">2025年9月</span>
                            </div>
                            <div class="plan-item-meta">
                                <span class="plan-duration">10天</span>
                                <span class="plan-status">计划中</span>
                            </div>
                        </div>
                        
                        <div class="plan-item completed">
                            <div class="plan-item-header">
                                <h4>纽约之行</h4>
                                <span class="plan-date">2025年3月</span>
                            </div>
                            <div class="plan-item-meta">
                                <span class="plan-duration">5天</span>
                                <span class="plan-status">已完成</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="plan-detail">
                <div class="plan-header">
                    <div class="plan-title">
                        <h2>东京之旅</h2>
                        <span class="plan-date">2025年7月15日 - 2025年7月21日</span>
                    </div>
                    <div class="plan-controls">
                        <button class="secondary-btn">
                            <img src="images/placeholder.svg" alt="编辑" width="16" height="16">
                            编辑
                        </button>
                        <button class="secondary-btn">
                            <img src="images/placeholder.svg" alt="分享" width="16" height="16">
                            分享
                        </button>
                    </div>
                </div>
                
                <div class="plan-overview">
                    <div class="plan-stats">
                        <div class="plan-stat">
                            <div class="stat-value">7</div>
                            <div class="stat-label">天数</div>
                        </div>
                        <div class="plan-stat">
                            <div class="stat-value">12</div>
                            <div class="stat-label">景点</div>
                        </div>
                        <div class="plan-stat">
                            <div class="stat-value">4</div>
                            <div class="stat-label">住宿</div>
                        </div>
                    </div>
                    
                    <div class="plan-description">
                        <h3>行程概述</h3>
                        <p>这是一次为期7天的东京探索之旅，将游览东京的主要景点，体验当地文化和美食。</p>
                    </div>
                </div>
                
                <div class="plan-itinerary">
                    <h3>详细行程</h3>
                    
                    <div class="day-tabs">
                        <button class="day-tab active" data-day="1">第1天</button>
                        <button class="day-tab" data-day="2">第2天</button>
                        <button class="day-tab" data-day="3">第3天</button>
                        <button class="day-tab" data-day="4">第4天</button>
                        <button class="day-tab" data-day="5">第5天</button>
                        <button class="day-tab" data-day="6">第6天</button>
                        <button class="day-tab" data-day="7">第7天</button>
                    </div>
                    
                    <div class="day-content">
                        <div class="day-header">
                            <h4>第1天 - 到达与适应</h4>
                            <span class="day-date">2025年7月15日</span>
                        </div>
                        
                        <div class="timeline">
                            <div class="timeline-item">
                                <div class="timeline-time">09:00</div>
                                <div class="timeline-content">
                                    <h5>抵达成田国际机场</h5>
                                    <p>从机场乘坐机场快线前往市区</p>
                                </div>
                            </div>
                            
                            <div class="timeline-item">
                                <div class="timeline-time">12:00</div>
                                <div class="timeline-content">
                                    <h5>酒店入住</h5>
                                    <p>东京新宿京王广场酒店</p>
                                </div>
                            </div>
                            
                            <div class="timeline-item">
                                <div class="timeline-time">14:00</div>
                                <div class="timeline-content">
                                    <h5>新宿御苑</h5>
                                    <p>参观日本传统庭园，欣赏樱花和日本园林艺术</p>
                                </div>
                            </div>
                            
                            <div class="timeline-item">
                                <div class="timeline-time">18:00</div>
                                <div class="timeline-content">
                                    <h5>晚餐</h5>
                                    <p>在新宿区品尝正宗的日本拉面</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="plan-notes">
                    <h3>旅行笔记</h3>
                    <div class="note-editor">
                        <textarea placeholder="添加旅行笔记..."></textarea>
                        <button class="secondary-btn">保存</button>
                    </div>
                    <div class="saved-notes">
                        <div class="note-item">
                            <p>记得带好转换插头和便携充电器</p>
                            <span class="note-date">2025-05-20</span>
                        </div>
                        <div class="note-item">
                            <p>查询东京地铁通票价格和购买地点</p>
                            <span class="note-date">2025-05-18</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 多语言旅行助手 | 版本 1.0</p>
    </footer>

    <script src="script.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 日期选项卡切换
            const dayTabs = document.querySelectorAll('.day-tab');
            dayTabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    dayTabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    // 这里应该加载对应日期的内容
                    const day = tab.dataset.day;
                    loadDayContent(day);
                });
            });
            
            // 旅行计划项目选择
            const planItems = document.querySelectorAll('.plan-item');
            planItems.forEach(item => {
                item.addEventListener('click', () => {
                    planItems.forEach(i => i.classList.remove('active'));
                    item.classList.add('active');
                    
                    // 这里应该加载对应计划的详情
                    const planTitle = item.querySelector('h4').textContent;
                    loadPlanDetails(planTitle);
                });
            });
            
            // 创建新计划按钮
            document.getElementById('create-plan-btn').addEventListener('click', () => {
                alert('创建新旅行计划功能即将上线，敬请期待！');
            });
        });
        
        // 加载日期内容
        function loadDayContent(day) {
            console.log(`加载第${day}天的行程内容`);
            // 实际应用中应该从API获取对应日期的行程内容
            
            // 模拟加载不同日期的内容
            const dayContent = document.querySelector('.day-content');
            const dayHeader = dayContent.querySelector('.day-header');
            
            // 更新日期标题
            dayHeader.innerHTML = `
                <h4>第${day}天 - ${getDayTitle(day)}</h4>
                <span class="day-date">2025年7月${14 + parseInt(day)}日</span>
            `;
            
            // 这里应该更新时间线内容
        }
        
        // 获取日期标题
        function getDayTitle(day) {
            const titles = {
                '1': '到达与适应',
                '2': '东京塔与皇居',
                '3': '浅草寺与晴空塔',
                '4': '秋叶原与上野公园',
                '5': '镰仓一日游',
                '6': '迪士尼乐园',
                '7': '购物与返程'
            };
            
            return titles[day] || '行程安排';
        }
        
        // 加载计划详情
        function loadPlanDetails(planTitle) {
            console.log(`加载"${planTitle}"的详细信息`);
            // 实际应用中应该从API获取对应计划的详细信息
            
            // 更新计划标题
            document.querySelector('.plan-title h2').textContent = planTitle;
            
            // 这里应该更新其他计划详情
        }
    </script>
</body>
</html>